---
title: Eventos OnDrag
description: Una guía de como usar Fluid DnD llamando los eventos onDragStart y onDragEnd.
---

import { OnDragEvents } from "@/components/react/OnDragEvents.tsx";
import { OnDragEventsWithMoreInfo } from "@/components/react/OnDragEventsWithMoreInfo.tsx"
import { Code, Aside } from "@astrojs/starlight/components";

### Ejemplo de lista de números

Con **Fluid DnD** puedes crear eventos que se lancen cuando empiezas arrastrar un elemento (`onDragStart`) o cuando lo sueltas (`onDragEnd`).\
Crearemos un grupo de listas y añadimos los eventos `onDragStart` y `onDragEnd` que alternan la clase `marked-droppable` en los **droppables** usando una referencia al padre de estos (`droppableGroup`):

export const highlightsListOfNumbers = ["onDragStart", "onDragEnd", "droppableGroup "];

export const listOfNumbers = `
//...
const droppableGroup = useRef<HTMLDivElement>(null)
function onDragStart(){
  const droppables = droppableGroup.current?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',true)
  }
}
function onDragEnd (){
  const droppables = droppableGroup.current?.querySelectorAll('.droppable-group-group1')??[]
  for (const droppable of [...droppables]) {
    droppable.classList.toggle('marked-droppable',false)
  }
}
const [ parent, listValue ] = useDragAndDrop<number, HTMLUListElement>([1, 2, 3, 4, 5],{
    droppableGroup: 'group1',
    onDragStart,
    onDragEnd,
});
const [ parent2, listValue2 ] = useDragAndDrop<number, HTMLDivElement>([6, 7, 8, 9, 10],{
    droppableGroup: 'group1',
    direction: "horizontal",
    onDragStart,
    onDragEnd,
});

`;

<Code code={listOfNumbers} lang="tsx" mark={highlightsListOfNumbers} />

### Creando la vista

Después, crearemos dos listas en la vista y pasamos la referencia `droppableGroup`:

export const listOfNumbersDraggable = `
  return (
      <div ref={droppableGroup} className="group-list bg-[var(--sl-color-gray-6)]">
          <ul ref={parent} className="number-list">
            <!-- ... -->
          </ul>
          <div ref={parent2} className="number-list-h">
              <!-- ... -->
          </div>
      </div>
  )
};

`;

export const highlightsDraggable = ["droppableGroup"];

<Code code={listOfNumbersDraggable} lang="tsx" mark={highlightsDraggable} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEvents client:load  />
</div>

### Uso de los parámetros de eventos onDrag

Puedes usar los eventos `onDragStart` y `onDragEnd` para obtener más información sobre el proceso de arrastre.
Por ejemplo, puedes obtener el valor (`value`) del elemento que se está arrastrando y el valor (`value`) del último elemento que se soltó 
<Aside type="note">También puedes obtener el valor del atributo `data-index` de `DragEndEventData` y `DragStartEventData`.</Aside>

export const onDragParams = `
import { type DragEndEventData, type DragStartEventData } from "fluid-dnd";
//...
const [ draggedElement, setDraggedElement ] = useState<number>()
const [ lastDroppedElement, setLastDroppedElement ] = useState<number>()
function onDragStart(data: DragStartEventData<number>){
  setDraggedElement(data.value);
  //...
}
function onDragEnd (data: DragEndEventData<number>){
  setLastDroppedElement(data.value);
  //...
}
//...
`;
export const highlightsOnDragParams = ["draggedElement", "lastDroppedElement", "data", "DragEndEventData", "DragStartEventData","data.value"];

<Code code={onDragParams} lang="tsx" mark={highlightsOnDragParams} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <OnDragEventsWithMoreInfo client:load  />
</div>